<template>
	<view class="app-main">
		<view class="content">
			<router-view></router-view>
		</view>
		<view class="bottom-nav">
			<BottomNav v-on:navCallback="clickCallback"></BottomNav>
		</view>
	</view>
</template>

<script>
	import BottomNav from '@/components/nav/BottomNav.vue'
	export default {
		components: {
			//底部导航组件
			BottomNav
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			clickCallback(i) {
				console.log(i)
				if(i==0){
					uni.navigateTo({
					    url: 'pages/bookshop/bookshop'
					});
				}else if(i==1){
					uni.navigateTo({
					    url: 'pages/bookcase/bookvase'
					});
				}else if(i==2){
					uni.navigateTo({
					    url: 'pages/me/me'
					});
				}
			}

		}
	}
</script>

<style>
	.app-main{
		display: flex;
		flex-direction:column;
	}
	.content {
		display: flex;
		height: auto;
		position: relative;
	}
	.bottom-nav{
		position: fixed;
		bottom: 0;
		padding-bottom: 3px;
		background-color: #ffffff;
	}

</style>
